import React, { useEffect, useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { Button, TextArea, Toast, Rate } from 'antd-mobile'
import Navbar from '../../../compounts/navber/Navbar'

function CommentDetail() {
    const location = useLocation()
    const navigate = useNavigate()

    const [post, setPost] = useState(null)
    const [comments, setComments] = useState([])
    const [text, setText] = useState('')
    const [replyingTo, setReplyingTo] = useState(null)
    const [replyText, setReplyText] = useState('')
    const [rating, setRating] = useState(0)

    useEffect(() => {
        // 接收上个页面透传的帖子数据；若无则使用默认演示数据
        const fallbackPost = {
            id: 1,
            author: '热心病友',
            avatar: 'https://picsum.photos/seed/avatar/48/48',
            time: '刚刚',
            content: '最近胃部不适，有没有相同经历的朋友分享一下经验？',
            images: ['https://picsum.photos/seed/p1/300/180'],
            like: 12,
            comment: 3,
            tag: '胃病交流'
        }
        const state = location.state || {}
        setPost(state.post || fallbackPost)

        // 模拟加载评论
        setComments(state.comments || [
            { id: 101, user: '小李', content: '少吃辛辣，注意休息。', time: '10:12', replies: [] },
            { id: 102, user: 'Ada', content: '可以去消化内科做个简单检查。', time: '昨天', replies: [
                { id: 201, user: '热心病友', content: '好的谢谢！', time: '昨天' }
            ] }
        ])
    }, [location.state])

    const handleSend = () => {
        const value = text.trim()
        if (!value) {
            Toast.show({ content: '请输入评论内容' })
            return
        }
        const c = { id: Date.now(), user: '我', content: value, time: new Date().toLocaleString(), replies: [] }
        setComments(prev => [c, ...prev])
        setText('')
        Toast.show({ content: '评论成功' })
    }

    const handleReply = () => {
        const value = replyText.trim()
        if (!value) {
            Toast.show({ content: '请输入回复内容' })
            return
        }
        setComments(prev => prev.map(c => {
            if (c.id === replyingTo) {
                const r = { id: Date.now(), user: '我', content: value, time: new Date().toLocaleString() }
                return { ...c, replies: [...(c.replies || []), r] }
            }
            return c
        }))
        setReplyText('')
        setReplyingTo(null)
        Toast.show({ content: '回复成功' })
    }

    if (!post) {
        return (
            <div style={{ paddingTop: '45px' }}>
                <Navbar title='评论详情' />
                <div style={{ padding: 16 }}>加载中...</div>
            </div>
        )
    }

    return (
        <div style={{ paddingTop: '45px', background: '#f5f5f5', minHeight: '100vh' }}>
            <Navbar title='评论详情' />

            {/* 帖子内容卡片 */}
            <div style={{ background: '#fff', margin: 16, borderRadius: 12, padding: 16, boxShadow: '0 2px 8px rgba(0,0,0,.06)' }}>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: 12 }}>
                    <img src={post.avatar} alt='' style={{ width: 36, height: 36, borderRadius: '50%', marginRight: 10 }} />
                    <div style={{ flex: 1 }}>
                        <div style={{ fontWeight: 600, color: '#333' }}>{post.author}</div>
                        <div style={{ color: '#999', fontSize: 12 }}>{post.time} · {post.tag}</div>
                    </div>
                    <div style={{ color: '#999', fontSize: 12 }}>❤️ {post.like} · 💬 {post.comment}</div>
                </div>
                <div style={{ color: '#333', lineHeight: 1.7, marginBottom: 12 }}>{post.content}</div>
                {post.images && post.images.length > 0 && (
                    <div style={{ overflow: 'hidden', borderRadius: 8 }}>
                        <img src={post.images[0]} alt='' style={{ width: '100%', display: 'block' }} />
                    </div>
                )}
            </div>

            {/* 评分（可选） */}
            <div style={{ background: '#fff', margin: '0 16px 12px', borderRadius: 12, padding: 12 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span style={{ color: '#666' }}>有用评分</span>
                    <Rate value={rating} onChange={setRating} allowHalf />
                    <span style={{ color: '#999', fontSize: 12 }}>{rating || 0}分</span>
                </div>
            </div>

            {/* 评论输入 */}
            <div style={{ background: '#fff', margin: '0 16px', borderRadius: 12, padding: 12 }}>
                <TextArea
                    placeholder='说点什么吧...'
                    value={text}
                    onChange={setText}
                    rows={2}
                    maxLength={300}
                    showCount
                    style={{ background: '#fafafa' }}
                />
                <div style={{ textAlign: 'right', marginTop: 8 }}>
                    <Button size='small' color='primary' onClick={handleSend}>发表评论</Button>
                </div>
            </div>

            {/* 评论列表 */}
            <div style={{ background: '#fff', margin: 16, borderRadius: 12, padding: 12 }}>
                <div style={{ fontWeight: 600, marginBottom: 8 }}>全部评论（{comments.length}）</div>
                {comments.length === 0 && <div style={{ color: '#999', textAlign: 'center', padding: 16 }}>暂无评论</div>}
                {comments.map(c => (
                    <div key={c.id} style={{ padding: '12px 0', borderTop: '1px solid #f5f5f5' }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                            <div style={{ fontWeight: 500, color: '#333' }}>{c.user}</div>
                            <div style={{ color: '#999', fontSize: 12 }}>{c.time}</div>
                        </div>
                        <div style={{ color: '#444', lineHeight: 1.7 }}>{c.content}</div>
                        <div style={{ marginTop: 8 }}>
                            <Button size='mini' fill='none' onClick={() => setReplyingTo(c.id)}>回复</Button>
                        </div>

                        {c.replies && c.replies.length > 0 && (
                            <div style={{ background: '#fafafa', borderRadius: 8, padding: 8, marginTop: 8 }}>
                                {c.replies.map(r => (
                                    <div key={r.id} style={{ borderBottom: '1px dashed #eee', padding: '6px 0' }}>
                                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                            <span style={{ color: '#555', fontWeight: 500 }}>{r.user}</span>
                                            <span style={{ color: '#aaa', fontSize: 12 }}>{r.time}</span>
                                        </div>
                                        <div style={{ color: '#666', fontSize: 13 }}>{r.content}</div>
                                    </div>
                                ))}
                            </div>
                        )}

                        {replyingTo === c.id && (
                            <div style={{ marginTop: 8 }}>
                                <TextArea
                                    placeholder='回复内容...'
                                    value={replyText}
                                    onChange={setReplyText}
                                    rows={2}
                                    maxLength={200}
                                    showCount
                                    style={{ background: '#fafafa' }}
                                />
                                <div style={{ textAlign: 'right', marginTop: 6, display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
                                    <Button size='mini' onClick={() => setReplyingTo(null)}>取消</Button>
                                    <Button size='mini' color='primary' onClick={handleReply}>发送</Button>
                                </div>
                            </div>
                        )}
                    </div>
                ))}
            </div>

            <div style={{ height: 80 }}></div>
        </div>
    )
}

export default CommentDetail









